<template>

  <div>
    <van-nav-bar title="开始充电" left-text="返回" left-arrow @click-left="onClickLeft" right-text="我的账单" right-arrow @click-right="toSeeBill" />
  </div>
  <van-image src="http://tianwc.oss-cn-beijing.aliyuncs.com/dev/20241122/1732244890605.png" />

  <div class="main-div">
    <div class="left-div" style="border-right:0px solid white;width: 130px;margin: 5px;">
      <span>充电功率</span>
      <br>
      <span>32.8Kw</span>
    </div>
    <div class="centter-div" style="border-right:0px solid white;width: 130px;margin: 5px;">
      <span>充电电量</span>
      <br>
      <span>32.8Kw</span>
    </div>
    <div class="right-div" style="border-right:0px solid white;width: 130px;margin: 5px;">
      <span>费用</span>
      <br>
      <span>0.6￥/KWh</span>
    </div>
  </div>
  <div class="foot-div">
    <span>
     <div class="form-container">
    <el-form :model="form" label-width="auto" style="max-width: 100px;">
      <el-form-item label="当前电量">
        <el-input v-model="form.electromagnetic" type="button" />
      </el-form-item>
    </el-form>
  </div>
      <van-button round type="success" size="normal" @click="startCharging()">开始充电</van-button><br><br>
      <van-button round type="success" size="normal" @click="toSeeCharg()">查看充电状态</van-button>
    </span>
  </div>

</template>
<script setup>
import router from '@/router'
import axios from "axios";
import {ref} from "vue";
const onClickLeft = () => history.back();
const form = ref({})
function toSeeBill (){
  axios.post('http://localhost:8812/car/ownerCar',null,{params: {userId: 2}}).then(
      res => {
        if (res.data.data.data[0].bill != 0){
          router.push('/charging/finish')
        }else {
          alert("暂无账单")
        }
      }
  )
}
function startCharging() {
  axios.post('http://localhost:8812/car/startCharg',null,{params: {id: 2}}).then(
      res => {
        if (res.data.code == 200){
          router.push('/charging/starting')
        }else if (res.data.errorMessage == "您有未支付的账单"){
          alert(res.data.errorMessage)
          router.push('/charging/finish')
        }else {
          alert(res.data.errorMessage)
        }
      }
  )

}
function toSeeCharg() {
  axios.post('http://localhost:8812/car/carList').then(
      res => {
        if (res.data.data.data[0].estatu == 2){
          alert("正在充电")
          router.push('/charging/starting')
        }else {
          alert("未在充电")
        }
      }
  )
}
function show() {
  axios.post('http://localhost:8812/car/carList').then(
      res => {
        form.value=res.data.data.data[0]
      }
  )
}
show()
</script>
<style>
.main-div {
  margin: 8px;
  height: 65px;
  width: auto;
  display: flex;
  border-radius: 2%;
  background-color: gray;
}

image {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.foot-div {
  text-align: center;
}
</style>
<style scoped>
.form-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 10vh; /* 设置容器高度为视口高度 */
}
</style>
